<template>
  <div id="payBox">
    <flexbox class="topBox">
        <flexbox-item align="center">
            <div class="flex-demo">
                <h1>南京</h1>
                <span>发货地</span>
            </div>
        </flexbox-item>
        <flexbox-item align="center">
            <div class="flex-demo">
                <img src="../assets/img/zhixiang.png">
            </div>
        </flexbox-item>
        <flexbox-item align="center">
            <div class="flex-demo shipingAddress" >
                <h1>江苏</h1>
                <span>收货地</span>
            </div>
        </flexbox-item>
    </flexbox>
    <group>
        <cell title="收件人" is-link value="陈家洛">
            <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/img/username.png">
        </cell>
    </group>
     <group>
        <cell title="手机号码" is-link  value="18112523932">
            <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/img/phonec.png">
        </cell>
    </group>
    <group>
        <cell title="预估运费" is-link  value="12元" class="specialItem">
            <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/img/rmb.png">
        </cell>
    </group>
    <group>
        <cell title="支付方式" is-link  value="微信支付">
            <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/img/qianbao.png">
        </cell>
    </group>
    <flexbox class="payBtnBox">
        <flexbox-item >
          <x-button type="primary" class="laterBtn">稍后支付</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="warn" class="immediatelyBtn" @click.native="showPlugin">立即支付</x-button>
        </flexbox-item>
    </flexbox>
    <p class="annotations">注:点稍后支付,可在我的寄件中完成支付</p>
    
  </div>
</template>
<script>
    import { Flexbox,FlexboxItem,Group,Cell,XButton} from 'vux'
    export default {
        data(){
            return {

            }
        },
        components:{
            Flexbox,
            FlexboxItem,
            Group,
            Cell,
            XButton
        },
        mounted:function(){
            var cHeight = document.body.clientHeight;
            console.log(cHeight)
            console.log(1)
            // document.getElementById('payBox').style.height = cHeight+'px';
        },
        methods:{
            showPlugin(){
                var _this = this;
                this.$vux.confirm.show({
                    // title: 'Title',
                    content: '确认订单',
                    onShow () {
                    console.log('plugin show')
                    },
                    onHide () {
                    console.log('plugin hide')
                    },
                    onCancel () {
                    console.log('plugin cancel')
                    },
                    onConfirm () {
                     _this.$router.push({path:'/Pay'})
                    }
                })
            }
        }
    }
</script>
